<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>起点</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../../styles/common.css" />
    <link rel="stylesheet" href="../../styles/index.css" />
    <link rel="stylesheet" href="../../styles/icon/iconfont.css" />
    <style>
        .el-header, .el-footer {
            background-color: black;
            color: white;
            text-align: center;
            line-height: 60px;
        }

        .el-main {
            background-color: black;
            color: white;
            text-align: center;
            line-height: 160px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
        .container {
            display: flex;
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            background-color: #100c2a;
        }

        .previous {
            background-color: #8e8a9f;
            color: #decece;
        }

        .round {
            border-radius: 50%;
        }

    </style>
</head>

<body>
<div class="app" id="app">
    <el-col :span="1" style="height: 100%" class="container">
        <el-button type="info" class="previous round" onclick='location.href=("pingjuntui2.html")'>&#8249;</el-button>
    </el-col>
    <el-col :span="22" style="height: 100%">

    <el-row :span="8" style="height: 50%">
        <el-col style="height: 100%" :span="12"><div style="height: 100%" class="grid-content bg-purple">
            <div ref="chart" style="width: 100%; height: 100%"></div>
        </div>
        </el-col>
        <el-col style="height: 100%" :span="12"><div style="height: 100%" class="grid-content bg-purple">
            <div ref="chart1" style="width: 100%; height: 100%"></div>
        </div></el-col>
    </el-row>
    <el-row :span="8" style="height: 50%">
        <el-col style="height: 100%" :span="24"><div style="height: 100%" class="grid-content bg-purple">
            <div ref="chart2" style="width: 100%; height: 100%"></div>
        </div></el-col>
    </el-row>
    </el-col>

    <el-col :span="1" style="height: 100%" class="container">
        <el-button type="info" class="previous round" onclick='location.href=("week.html")'>&#8250;</el-button>
    </el-col>

</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/echarts.js"></script>
<script src="../../js/request.js"></script>
<script src="api/test.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                data1:{
                    title: [],
                    reward:[],
                },
                data2: [
                ],
                data3:{
                    title: [],
                    ticket:[],
                },
            }
        },
        computed: {},
        created() {
            this.getNewList();
            this.getNewList1();
            this.getNewList2();
            this.getNewList3();
        },
        beforeDestroy() {
        },
        mounted() {
            this.$nextTick(() => {
                this.initChart(this.data1);
                this.initChart1(this.data2);
                this.initChart2(this.data3);
                this.initChart3(this.data4);
            });
        },
        methods: {
            getNewList() {
                reward().then((res) => {

                    if (res.code === 1) {
                        // console.log(res)
                        for (let i = 0; i < res.data.length; i++) {
                            this.data1.title[i] = res.data[i].novelname;
                            this.data1.reward[i] = res.data[i].reward;
                        }
                        console.log(this.data1)
                        this.initChart(this.data1);
                    }

                })
            },
            getNewList1() {
                // console.log("aaa")
                state1().then((res) => {
                    if (res.code === 1) {
                        this.data2 = res.data;
                        this.initChart1(this.data2);
                    }

                })
            },
            getNewList2() {
                totaltui().then((res) => {

                    if(res.code===1){
                        // console.log(res)
                        for (let i =0; i <res.data.length; i++) {
                            this.data3.title[res.data.length-1-i] = res.data[i].novelname;
                            this.data3.ticket[res.data.length-1-i] = res.data[i].totaltui;
                        }
                        console.log(this.data3)
                        this.initChart2(this.data3);
                    }

                })
            },
            initChart(data1) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(this.$refs.chart,'dark');
                var option = {
                    title: {
                        text:  "打赏排行榜top10",
                        textStyle: {
                            fontSize:40
                        },
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                        },
                    },
                    //图表位置
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true,
                    },
                    //X轴
                    xAxis: {
                        type: "value",
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        //不显示X轴刻度线和数字
                        splitLine: {show: false},
                        axisLabel: {show: false},
                    },
                    yAxis: {
                        type: "category",
                        data: this.data1.title,
                        //升序
                        inverse: true,
                        splitLine: {show: false},
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        //key和图间距
                        offset: 10,
                        //动画部分
                        animationDuration: 300,
                        animationDurationUpdate: 300,
                        //key文字大小
                        nameTextStyle: {
                            fontSize: 5,
                        },
                    },
                    series: [
                        {
                            //柱状图自动排序，排序自动让Y轴名字跟着数据动
                            realtimeSort: true,
                            name: "数量",
                            type: "bar",
                            data: this.data1.reward,
                            barWidth: 14,
                            barGap: 10,
                            smooth: true,
                            valueAnimation: true,
                            //Y轴数字显示部分
                            label: {
                                normal: {
                                    show: true,
                                    position: "right",
                                    valueAnimation: true,
                                    offset: [5, -2],
                                    textStyle: {
                                        color: "#333",
                                        fontSize: 13,
                                    },
                                },
                            },
                            itemStyle: {
                                emphasis: {
                                    barBorderRadius: 7,
                                },
                                //颜色样式部分
                                normal: {
                                    barBorderRadius: 7,
                                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        {offset: 0, color: "#3977E6"},
                                        {offset: 1, color: "#37BBF8"},
                                    ]),
                                },
                            },
                        },
                    ],
                    //动画部分

                    animationDuration: 0,
                    animationDurationUpdate: 3000,
                    animationEasing: "linear",
                    animationEasingUpdate: "linear",
                };
                myChart.setOption(option);
                //图表大小变动从新渲染，动态自适应
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },
            initChart1(data2) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(this.$refs.chart1,'dark');
                var option = {
                    title: {
                        text: '完结小说占比',
                        left: 'center',
                        textStyle: {
                            fontSize:40
                        },
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        textStyle: {
                            fontSize:20
                        },
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: this.data2,
                            label: {
                                fontSize: 30,
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);
                //图表大小变动从新渲染，动态自适应
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },
            initChart2(data3) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(this.$refs.chart2,'dark');
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '小说总推荐排行',
                        textStyle: {
                            fontSize:30
                        },
                        left:'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLabel:{
                            fontSize:24
                        }
                    },
                    yAxis: {
                        type:'category',
                        data:this.data3.title.map((e)=>{
                            return {
                                value:e,
                                textStyle: {
                                    fontSize: 18
                                }}
                        }),

                    },
                    series: [
                        {
                            //name: '',
                            type: 'bar',
                            data:this.data3.ticket.map((e)=>{
                                return {
                                    value:e,
                                    label: {
                                        fontSize: 30,
                                        color: 'red'
                                    }}
                            }),
                        },

                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
        },
    })
</script>
</body>
</html>
